<template>
	<view class="safe-area-inset-bottom">
		<div class="share_box1">
			<img src="@/static/images/share_img.jpg" alt="">
			<div class="sub">
				<p>推荐有礼 合作共赢</p>
				<span class="sub-desc">加入励氪签分享推荐官团队，共享电子签约数字化红利<br>分享即得碳能量，立兑签署量，免费签合同</span>
			</div>
		</div>
		
		<div class="share_box2 w90">
			<div class="tittle1">分享得能量 免费签合同</div>
			<div class="tittle2">每分享1位实名注册的企业用户<br>即得2000碳能量，立即分享吧</div>
			<div class="border-flex">
				<span class="border-title">分享方法：复制链接邀请</span>
				<p class="p_href" style="color: #555;font-size: 28rpx;margin: 0;">【 <span>{{$store.getters.staffInfo.name}}</span> 】邀请您开通励氪签--全证据链可信电子签约服务！电子合同在线合规、合法签署，安全、可信、可查、可验，数据全链路安全加密，保障电子合同原文数据仅签约方可见。<br />点击注册链接，免费注册，立即开通！</p>
				<p class="p_href"><a href="'https://www.lksign.cn/Code='+$store.getters.staffInfo.nickId" target="_blank" class="a-primary">https://www.lksign.cn/Code={{$store.getters.staffInfo.nickId}}</a></p>
				<button class="copy-btn" @click="copyShareRegUrl">点击复制，去分享，赚能量</button>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				copyText: false, //显示复制
			}
		},
		methods: {
			/** 复制链接成功 */
			copyShareRegUrl() {
				this.$copyText(
					'【 李明龙 】邀请您开通励氪签--全证据链可信电子签约服务！电子合同在线合规、合法签署，安全、可信、可查、可验，数据全链路安全加密，保障电子合同原文数据仅签约方可见。\n点击注册链接，免费注册，立即开通！\nhttps://www.lksign.cn/Code=' + this.$store.getters.staffInfo.nickId).then(
					() => {
						this.$modal.msgSuccess("已复制分享链接，立刻发给好友吧！");
					},
					() => {
						this.$modal.msgError("复制失败！");
					}
				);
			},
		}
	}
</script>

<style scoped lang="scss">
	.a-primary{
		text-decoration: none;
		color: #666;
	}
	.w90{
		width: 90%;
		margin: 0 auto;
		position: relative;
	}
	
	.share_box1 {
		margin: 0 auto;
	}
	
	.share_box1 img {
		width: 100%;
		height:288rpx;
	}
	
	.share_box1 .sub {
		color: #fff;
		position: absolute;
		top: 60rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		text-align: center;
	}
	
	.share_box1 p {
		font-weight: 550;
		font-size: 36rpx;
	}
	
	.share_box1 .sub-desc {
		margin-top: 24rpx;
		display: block;
		color: #fff;
		font-size: 26rpx;
	}
	
	.share_box2 {
		padding: 64rpx 0;
		text-align: center;
	}
	
	.share_box2 .copy-btn {
		background: #00a660;
		color: #fff;
		padding: 6rpx 0;
		width: 100%;
		font-size: 28rpx;
		border-radius: 5rpx;
		border-color: #00a660;
		outline: none;
		border: none;
	}
	
	.border-flex {
		border: 2rpx solid #f1f1f1;
		margin-top: 64rpx;
		padding: 20rpx 30rpx;
		border-radius: 5rpx;
		text-align: left;
	}
	
	.border-flex .border-title {
		display: block;
		text-align: left;
		margin: 10rpx 0;
	}
	
	.p_href {
		text-align: left;
		margin:60rpx 0 10rpx;
	}
	
	.tittle1 {
		text-align: center;
		width: 100%;
		font-size: 36rpx;
		color: #333232;
		font-weight: bold;
	}
	.tittle2 {
		text-align: center;
		width: 100%;
		font-size: 28rpx;
		color: #666;
		margin: 16rpx auto 0;
	}
	
	page {
		background: $uni-bg-color;
	}

</style>
